import React, {Component} from "react";
import {Col, Row} from "antd";

import {Navigation} from "../layout";
import UserInfo from "./UserInfo";
import PasswordModification from "./PasswordModification";
import EmailModification from './EmailModification'
import SocialBinding from './SocialBinding'
import {connect} from 'react-redux';
import * as actions from '../../action/index';

import "../../style/user-center.css";
import {FormattedMessage} from "react-intl";
import {withRouter} from "react-router-dom";
import Footer from "../layout/footer";

class App extends Component {
    componentDidMount = () => {
        this.props.getUserInfo();
        this.props.getEmailResetStatus();
    };

    render() {
        return (
            <div id="user-center">
                <Navigation/>
                <Row type="flex" justify="center">
                    <Col className="profile" xs={{span: 24}} sm={{span: 18}} lg={{span: 18}}>
                        <div>
                            <h1><FormattedMessage id='个人中心' /></h1>
                        </div>
                        <Row gutter={20}>
                            <Col xs={{span: 24}} sm={{span: 12}} lg={{span: 12}}>
                                <UserInfo/>
                            </Col>
                            <Col xs={{span: 24}} sm={{span: 12}} lg={{span: 12}}>
                                <SocialBinding/>
                                <PasswordModification/>
                                <EmailModification/>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Footer/>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    getUserInfo: () => dispatch(actions.getUserInfo()),
    getEmailResetStatus: () => dispatch(actions.getEmailResetResult())

});

const mapStateToProps = state => ({
    user: state.user
})


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

